<template>
	<div>
		<div class="hotel">
			<div class="hotel_name" v-for="(hotel, index) in list" :key="index">			
				<i class="el-icon-back" @click="goback">
					</i>
				{{ hotel.hotel_name }}
				<div class="infort">
					<div class="information">
						<div class="image">
							<el-carousel indicator-position="outside">
								<el-carousel-item v-for="(hotelimg, index) in list1" :key="index">
									<h3>
										<img v-bind:src="hotelimg.imgUrl" style="height: 100%; width: 100%;object-fit: cover;">
									</h3>
								</el-carousel-item>
							</el-carousel>
						</div>
						<div class="information1">
							<div class="information2">
								<el-table :data="list">
									<el-table-column prop="hotel_star" label="酒店星级">
										<template slot-scope="scope">
											<span v-if="scope.row.hotel_star === 3"><img style="width:20%; height: 20%;"
													src="https://img0.baidu.com/it/u=4157110753,1538420512&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"></span>
											<span v-if="scope.row.hotel_star === 4"><img style="width:20%; height: 20%;"
													src="https://img1.baidu.com/it/u=1431251624,2763987438&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></span>
											<span v-if="scope.row.hotel_star === 5"><img style="width:20%; height: 20%;"
													src="https://img2.baidu.com/it/u=3502455264,2705807212&fm=253&fmt=auto&app=138&f=JPEG?w=513&h=300"></span>
										</template>

									</el-table-column>
									<el-table-column prop="is_parking" label="能否停车">
										<template slot-scope="scope">
											<span v-if="scope.row.is_parking === 1">是</span>
											<span v-else-if="scope.row.is_parking === 0">否</span>
										</template>
									</el-table-column>
									<el-table-column prop="area" label="面积(m²)">
									</el-table-column>
									<el-table-column prop="telphone" label="电话">
									</el-table-column>
								</el-table>
							</div>
							<div class="information2">
								<el-table :data="list">
									<el-table-column prop="addr" label="地址">
									</el-table-column></el-table>
							</div>
							<div class="information2">
								<el-table :data="list">
									<el-table-column prop="description" label="描述">
									</el-table-column></el-table>
							</div>
							<button @click="daohang">导航</button>
						</div>
						<!-- <button @click="getParams">aaaaaa</button> -->
					</div>
					<div class="map" style="height: 500px;width: 25%;">
						<mapSGJX style="height: 100%; width: 100%;border:1px solid black;" :message="mapneed"></mapSGJX>
					</div>
				</div>
				<HotelVueChild1 ref="HotelVueChild1_lhj" style="width: 100%;height: 20%;"></HotelVueChild1>
				<HotelVueChild2 ref="HotelVueChild2_lhj" style="width: 100%;height: 20%;"></HotelVueChild2>
			</div>
		</div>
	</div>
</template>

<script>
import HotelApi from "@/api/apiLiu/Hotel_request"
import HotelVueChild1 from "./HotelVueChild1_lhj.vue";
import HotelVueChild2 from "./HotelVueChild2_lhj.vue";
import mapSGJX from "../../components/mapSGJX.vue";
export default {
	components: {
		HotelVueChild1,
		HotelVueChild2,
		mapSGJX
	},
	sectionOpen1(record, type) {
		let tmp = Object.assign({}, tmp, record);
		this.$refs["HotelVueChild1"].open(tmp, type);
	},
	sectionOpen2(record, type) {
		let tmp = Object.assign({}, tmp, record);
		this.$refs["HotelVueChild2"].open(tmp, type);
	},
	sectionOpen3(record, type) {
		let tmp = Object.assign({}, tmp, record);
		this.$refs["mapPLJX"].open(tmp, type);
	},
	data() {
		return {
			list1: [],
			searchMap1: {
				hotel_id: 1,
				imgUrl: null,
			},
			pojo1: {
				hotel_id: null,
				imgUrl: null,
			},
			list: [],
			searchMap: {
				hotel_id: null,
				hotel_name: null,
				hotel_star: null,
				addx: null,
				addy: null,
				country: null,
				province: null,
				city: null,
				region: null,
				addr: null,
				is_parking: null,
				telphone: null,
				description: null,
				area: null,
				pageNum: 1,
				pageSize: 7,
			},
			count: 20,
			pojo: {
				hotel_id: null,
				hotel_name: null,
				hotel_star: null,
				addx: null,
				addy: null,
				country: null,
				province: null,
				city: null,
				region: null,
				addr: null,
				is_parking: null,
				telphone: null,
				description: null,
				area: null,

			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
			mapneed:"",
		}
	},
	created() {
		this.fetchData()
		this.fetchData1()
		this.searchMap.hotel_id=this.$route.params.hotel_id
	},
	mounted(){

	},
	methods: {
		// getParams(){
		// 	console.log(this.mapneed);
		// },
		goback(){
			this.$router.push(
				{
					name:"BigPage",
				}
			)
		},
		daohang(){
			this.$router.push(
				{
					name:"mapGuideChoose",
					params:{ends:this.mapneed,hotel_id:this.list[0].hotel_id}
				}
			)
		},
		add() {
			const hotel = {
				hotel_id: null,
				hotel_name: null,
				hotel_star: null,
				addx: null,
				addy: null,
				country: null,
				province: null,
				city: null,
				region: null,
				addr: null,
				is_parking: null,
				telphone: null,
				description: null,
				area: null,

				pageNum: 1,
				pageSize: 1,
			}
			this.list.unshift(hotel)
		},
		add1() {
			const hotelimg = {
				hotel_id: null,
				imgUrl: null,
			}
			this.list1.unshift(hotelimg)
		},
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			HotelApi.selectList(this.searchMap).then(response => {
				//  //把返回的结果赋值模型
				
				this.list = response.data.data
				// console.log(this.list[0].hotel_name);
				this.mapneed = this.list[0].hotel_name;
				this.count = response.data.count
			})
		},
		fetchData1() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			HotelApi.searchhotel(this.searchMap1.hotel_id).then(response => {
				//  //把返回的结果赋值模型
				this.list1 = response.data.data

			});

		},
		//当分页大小产生变化的时候调用该方法
		sizeData(size) {
			this.searchMap.pageSize = size
			this.fetchData()
		},
		pageData(page) {
			this.searchMap.pageNum = page
			this.fetchData()
		},
		//新增和修改使用同一个函数打开弹窗，区别是新增没有id
		handleEdit(id) {
			this.id = id
			//打开弹窗
			this.dialogFormVisible = true
			if (id !== '') {
				//根据id查询数据绑定到模型上面
				HotelApi.selectByHotel_id(id).then(reponse => {
					this.pojo = reponse.data.data;
				})
			} else {
				this.pojo = {
					hotel_id: null,
					hotel_name: null,
					hotel_star: null,
					addx: null,
					addy: null,
					country: null,
					province: null,
					city: null,
					region: null,
					addr: null,
					is_parking: null,
					telphone: null,
					description: null,
					area: null,
				} //清空数据
			}
		},
		//新增和修改保存数据的方法
		handleSave() {
			if (this.id === null || this.id === '') {
				HotelApi.insert(this.pojo).then(reponse => {
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false
				})
			} else {
				HotelApi.insertOrUpdate(this.pojo).then(reponse => {
					//新增或者修改成功
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false

				})
			}
		},
		handleDelete(id) {
			this.$confirm('您确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				HotelApi.deleteByHotel_id(id).then(reponse => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}

</script>


<style>
* {
	margin: 0;
	padding: 0;
}

.body {
	overflow: hidden;
	background: #F5F7FA;
}

.hotel {
	width: 100%;

	display: flex;
	justify-content: baseline;
	flex-direction: column;
}

.hotel_name {
	width: 100%;
	height: 5%;
	position: relative;
	text-align: center;
	font-size: 50px;
	font-weight: 400;
	background: #F5F7FA;
}
.infort{
	width: 100%;
	height: 30%;
	display: flex;
	flex-direction: row;
}
.information {
	width: 75%;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid black;
}
.image {
	width: 30%;

	position: relative;
	overflow: hidden;
}

.information1 {
	width: 70%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	border-left:1px solid black;
}

.information2 {
	width: 100%;
	height: 33%;
	position: relative;
	display: flex;
	flex-direction: row;

}

.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
/* .map{
	width: 300px;
	height: 300px;
} */
</style>